<template>
	<view @touchmove.prevent.stop>
		<view class="auth_modal" v-show="auth" @click="noLogin">
			<view class="auth_modal_content" @click.stop>
				<view class="header">
					<image src="/static/logo.png"></image>
				</view>
				<view class="content">
					<view>祥瑜团餐</view>
				</view>
				<view class="btn">
					<button class="dyuserinfo" open-type="getPhoneNumber" @getphonenumber="login">使用手机号码快捷登录</button>
					<div class="cancel_content">
						<text class="cancel" @click="goPhoneLogin"> 使用其他手机号码</text>
						<text class="cancel" @click="noLogin"> 暂不登录</text>
					</div>
					<!-- <button class="dyuserinfo"  @click="goPhoneLogin">使用其他手机号码</button> -->
					<!-- <button open-type="getPhoneNumber" class="login_button" @getphonenumber="login" v-show="!logged">登录</button> -->

				</view>
				<!-- <view class="agreement" @click="setAgreement">
					<text :class="['checkbox',agreement ? 'chekced' : '']"></text> 我同意<text
						@click.stop="goToUrl('/pages/personal/userAgreement')">《用户服务协议》</text>和<text
						@click.stop="goToUrl('/pages/personal/privacyPolicy')">《隐私政策》</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import util from "@/utils/util.js";
	import {
		login,
		wxLogin
	} from "@/request/api.js";
	export default {
		name: "login",
		props: {
			auth: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				userInfo: "",
				util,
				agreement: false
			};
		},
		mouted() {},
		methods: {
			goPhoneLogin() {
				util.goToUrl("/pages/myPage/phoneLogin")
				this.noLogin();
			},
			setAgreement() {
				this.agreement = !this.agreement;
			},
			noLogin() {
				this.$emit("update:auth", false);
			},
			goToUrl(url) {
				util.goToUrl(url)
			},
			async login(e) {

				let that = this;


				// 微信小程序
				// #ifdef MP-WEIXIN

				wx.showLoading({
					title: '登录中...'
				})
				var detail = e.detail
				if (detail.errMsg == "getPhoneNumber:ok") {
					console.log(detail.code);
					uni.login({
						success: async (res) => {
							if (res.errMsg === 'login:ok') {
								
								 wxLogin({
								 		method: "GET",
								 		data: {
								 			codeForPhoneNumber: detail.code,
								 			codeForOpenId: res.code
								 		}, //请求体中封装code 
								 		type: 'json',
								 	}).then(async (res) => {
								 		console.log(res, 'res');
								 
								 
								 		if (res.code == 200) {
								 			let {
								 				token,
								 				phoneNumber
								 			} = res.data;
								 			uni.setStorageSync('token', token);
								 			// uni.setStorageSync('phoneNumber', phoneNumber);
								 			uni.setStorageSync('userInfo', res.data);
								 			uni.setStorageSync('tokenExp', util.getTokenExp())
								 			uni.showToast({
								 				title: "登录成功",
								 				icon: "success",
								 			});
								 			that.$emit("loginSuccess")
								 			// 绑定邀请人id
								 			// util.sendSharedUserIdFn();
								 		} else {
								 			uni.showToast({
								 				title: res.message || "登录失败，请稍后重试",
								 				icon: "none",
								 			});
								 		}
								 
								 	})
								 	.catch((err) => {
								 		console.log(err, "err");
								 		uni.showToast({
								 			title: "登录失败，请稍后重试",
								 			icon: "none",
								 		});
								 	});
							}
						},
					})
					// return;
					
				}

				// wx.login({
				// 	success(res) {
				// 		if (res.code) {
				// 			let params = {
				// 				code: res.code,
				// 			}
				// 		} else {
				// 			console.log('登录失败！' + res.errMsg)
				// 		}
				// 	}
				// })


				// #endif
			},

		},
	};
</script>

<style>

</style>
<style lang="scss" scoped>
	.auth_modal {
		// width:100vw;
		// height:100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		width: 100%;
		bottom: 0;
		z-index: 1000;

		&_content {
			position: fixed;
			width: 100%;
			bottom: 0;
			left: 0;
			// transform: translate(-50%, -50%);
			background: #fff;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			font-size: 36rpx;
			text-align: center;
			overflow: hidden;
			padding: 30px 0 110rpx;

			.header {
				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 20rpx;
					display: inline-block;
				}
			}

			.content {
				padding: 0 20rpx 30rpx;

				view {
					line-height: 80rpx;
				}
			}

			.btn {
				display: flex;
				flex-direction: column;

				.dyuserinfo {
					font-size: 26rpx;
					font-weight: 900;
					color: #fff;
					// background-repeat: no-repeat;
					// background-size: 100% 100%;
					// background-image:linear-gradient(to right,#7072FF, #41FFF7);
					background: #eb5b1e;
					width: 480rpx;
					height: 88rpx;
					line-height: 88rpx;
					border-radius: 50rpx;
					// padding: 20rpx 10rpx;
					margin: 0 auto 30rpx;
				}

				.cancel_content {
					width: 480rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 0 auto;
				}

				.cancel {
					color: #999;
					font-size: 24rpx;
					margin: 0 0 60rpx;
					border-bottom: 2rpx solid #999;
				}
			}

			.agreement {
				display: flex;
				text-align: center;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #999;

				.checkbox {
					display: inline-block;
					width: 30rpx;
					height: 30rpx;
					border: 2rpx solid #999;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				.chekced {
					background: green;
					border-color: green;
					position: relative;

					&::after {
						display: inline-block;
						content: '';
						width: 8rpx;
						height: 18rpx;
						border-bottom: 4rpx solid #fff;
						border-right: 4rpx solid #fff;
						position: absolute;
						top: 45%;
						left: 50%;
						transform: translate(-50%, -50%) rotate(45deg);
					}

				}
			}
		}
	}

	button {
		color: #000;
	}
</style>